<template>
  <div class="gold">

      <div class="number">
          <p>25660</p>
          <p>女神金币可消费，多买多赚，多投多赚！</p>
      </div>
      <div class="detail">

          <div class="page">
          收支明细
          </div>
          <div class="page clearFix">
                    <div class="fl content">
                        <p>购买商品奖励</p>
                        <p>2017-5-22   13：57：24</p>
                    </div>
                    <div class="fr get">
                        +500
                    </div>
          </div>
          <div class="page clearFix">
                              <div class="fl content">
                                  <p>购买商品奖励</p>
                                  <p>2017-5-22   13：57：24</p>
                              </div>
                              <div class="fr get">
                                  +500
                              </div>
          </div>
          <div class="page clearFix">
                    <div class="fl content">
                        <p>购买商品奖励</p>
                        <p>2017-5-22   13：57：24</p>
                    </div>
                    <div class="fr get">
                        +500
                    </div>
          </div>
      </div>

  </div>
</template>

<script>

export default {
  name: 'Gold',
  data () {
    return {
      msg: 'message'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.detail,.number{
    background:#fff;
    padding:.4rem .4rem;
    margin-top:.4rem;

}
.page{
    border-bottom:1px solid #000;
    padding:.4rem .4rem;
    margin:.3rem 0;

}
.page .content p{
padding:.1rem 0;
}

.page .get{
    font-size:1rem;
    padding:.2rem .4rem;
}

</style>
